<template>
  <div class="addressEdit">
    <van-nav-bar
      :title="route.query.name==='add'?'新增地址':'编辑地址'"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 编辑 -->
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="addressData.name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="addressData.phone"
          name="手机号码"
          label="手机号码"
          placeholder="手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            :field-names="{ text: 'cityname',value: 'id', children:'children',}"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-field
          v-model="addressData.desc"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <van-field name="switch" label="设为默认收货地址">
          <template #input>
            <van-switch v-model="checked" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" @click="createAdd" v-if="route.query.name==='add'">
          新增
        </van-button>
        <van-button round block type="primary" native-type="edit" @click="updateAdd" v-if="route.query.name==='edit'">
          保存
        </van-button>
        <van-button round block type="danger" native-type="del" @click="delAdd" v-if="route.query.name==='edit'">
          删除
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import {getCityApi,addAddressApi,updateUserAddApi,deleteUserAddApi,setDefaultAddApi} from '@/server'
import { useRoute,useRouter} from 'vue-router';
const route=useRoute()
const router=useRouter()
const onClickLeft = () => history.back();
// 新增地址数据
const addressData=ref({
  id:'',
  name:'',
  phone:'',
  area:'',
  desc:'',
  area_name:'',
  default_set:''
})
// 默认收获地址开关
const checked = ref(false);
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
onMounted(() => {
  if(route.query.data){
    let data=JSON.parse(route.query.data)
    addressData.value=data
    addressData.value.phone=data.tel
    fieldValue.value=data.area_name
  }
})
// 选项列表，children 代表子选项，支持多级嵌套
const options = ref([])
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.cityname).join('/');
  addressData.value.area_name=selectedOptions.map((option) => option.cityname).join('');
  addressData.value.area=selectedOptions.map((option) => option.id).join(',');
};
// 获取所有城市
const getCityList=async ()=>{
  let res=await getCityApi()
  options.value=res.data.result
}
getCityList()
// 新增地址
const createAdd=async ()=>{
  let res=await addAddressApi({...addressData.value})
  if(res.status===200){
    router.push('/AddressList')
  }
}
// 编辑地址
const updateAdd=async ()=>{
  if(checked.value){
    let res=await setDefaultAddApi(addressData.value.id)
    addressData.value.default_set=res.data.result.default_set
  }
  let res=await updateUserAddApi(addressData.value.id,{...addressData.value})
  if(res.status===200){
    router.push('/AddressList')
  }
}
// 删除地址
const delAdd=async ()=>{
  let res=await deleteUserAddApi(addressData.value.id)
  if(res.status===200){
    router.push('/AddressList')
  }
}
</script>

<style lang='scss'>
.addressEdit{
  width: 100vw;
  height: 266.6667vw;
  background-color: #f7f8fa;
  .van-nav-bar{
    background-color: #fff;
  }
  .van-form{
    margin-top: 2.6667vw;
  }
}
</style>
